<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
  <meta name="keywords" content="图床-照片共享"/>
  <meta name="description" content="图床-照片共享"/>
  <title>图床-照片共享</title>

<link href="//mirror.fe80.cn/bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
<link href="bed/fileinput.min.css" rel="stylesheet">
<link href="bed/all.css" rossorigin="anonymous" rel="stylesheet">
  <link rel="stylesheet" href="bed/iconfont.css">
  <link rel="stylesheet" href="bed/mdui.min.css">
  <link rel="stylesheet" href="bed/app.css?v=1.3">
  <!--[if IE]>
  <script>window.location.href = '/compatibility.html';</script>
  <![endif]-->
  <!-- 可以直接引入第三方css样式 -->
<style>
  /* body {} */
</style></head>
<body class="mdui-theme-accent-indigo mdui-appbar-with-toolbar ">

<div class="mdui-appbar mdui-appbar-fixed">
  <div class="mdui-toolbar mdui-color-black">
    <span mdui-drawer="{target: '#menu'}" class="mdui-btn mdui-btn-icon open-menu"><i class="mdui-icon material-icons">&#xe5d2;</i></span>
    <a href="http://i.fe80.cn/" class="mdui-typo-headline">图床-照片共享</a>
    <div class="mdui-toolbar-spacer"></div>
        <!-- More -->
    <!--<span mdui-menu="{target: '#more'}" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">&#xe5d4;</i></span>
    <ul class="mdui-menu" id="more">
      <li class="mdui-menu-item">
        <a href="https://www.wispx.cn" target="_blank" class="mdui-ripple">熊二哈的猫窝</a>
      </li>
    </ul>-->
  </div>
</div>


<div id="menu" class="mdui-drawer mdui-drawer-close">
  <div class="mdui-list" mdui-collapse="{accordion: true}">
    <a class="mdui-list-item mdui-ripple mdui-list-item-active" href="http://i.fe80.cn/">
      <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">&#xe88a;</i>
      <div class="mdui-list-item-content">首页</div>
    </a>
        <a class="mdui-list-item mdui-ripple " href="http://i.fe80.cn/amaze/login">
      <i class="mdui-list-item-icon mdui-icon material-icons iconfont icon-login mdui-text-color-teal"></i>
      <div class="mdui-list-item-content">登录</div>
    </a>
    <a class="mdui-list-item mdui-ripple " href="http://i.fe80.cn/">
      <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-purple">&#xe7f0;</i>
      <div class="mdui-list-item-content">注册</div>
    </a>
      </div>
</div>


<div class="mdui-container">
  <main>
    <div class="upload-container">
      <div class="title">
        <h1>图片上传</h1>
        <span style="float: right;"> <a href="https://file.fe80.cn/pages/gallerys/jquery-lightbox/">查看所有图片</a> </span>
        <p>最大可上传 5 MB的图片，单次同时可选择 10 张。本站已托管<font color="#2860900"> 160张</font> 图片。</p>
        <p>
            <font color="#ff0000">请勿上传违反中国大陆和香港法律的图片，违者后果自负！如有侵权请邮件与我们联系处理 !</font>
        </p>
      </div>
      <form action="" method="post" enctype="multipart/form-data">
        <input id="image" style="display: none;" type="file" multiple name="file" accept="image/*">
      </form>
      <div class="success-info">
        <div class="mdui-tab mdui-tab-scrollable" mdui-tab>
          <a href="#code-url" class="mdui-ripple mdui-tab-active">URL</a>
          <a href="#code-html" class="mdui-ripple">HTML</a>
          <a href="#code-bbcode" class="mdui-ripple">BBCode</a>
          <a href="#code-markdown" class="mdui-ripple">Markdown</a>
          <a href="#code-markdown-with-link" class="mdui-ripple">Markdown with link</a>
        </div>
        <div id="code-url"><ul></ul></div>
        <div id="code-html"><ul></ul></div>
        <div id="code-bbcode"><ul></ul></div>
        <div id="code-markdown"><ul></ul></div>
        <div id="code-markdown-with-link"><ul></ul></div>
      </div>
    </div>
      </main>
</div>


<div class="mdui-fab-wrapper">
  <button id="to-top" class="mdui-fab mdui-ripple mdui-fab-hide mdui-color-theme-accent">
    <i class="mdui-icon material-icons">&#xe5d8;</i>
  </button>
</div>
<div id="loading-container">
  <div class="mask"></div>
  <div class="loading">
    <div class="mdui-spinner mdui-spinner-colorful"></div>
  </div>
</div>
<footer>
  <div class="mdui-container">
    此图床由<a href="https://i.fe80.cn/">阿优乐扬<a/>免费提供，感谢<a href="https://www.lsky.pro">Lsky Pro<a/>大力支持!
    <a href="http://beian.miit.gov.cn" target="_blank">黔ICP备18008414号</a>.    <font color="ff0000">【侵权举报删除图片联系邮箱：linzening@qq.com】</font>
  </div>
</footer>

<script src="//mirror.fe80.cn/jquery/3.6.1/jquery.min.js"></script>
<script src="bed/mdui.min.js"></script>
<script src="bed/marked.js"></script>
<script src="bed/app.js?v=1.0"></script>

<script src="//mirror.fe80.cn/bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="bed/clipboard.min.js"></script>
<script src="bed/piexif.min.js"></script>
<script src="bed/sortable.min.js"></script>
<script src="bed/purify.min.js"></script>
<script src="bed/fileinput.min.js"></script>
<script src="bed/theme.min.js"></script>
<script src="bed/zh.js"></script>
<script src="hash.js"></script>
<script src="/static/js/global.js"></script>
<script>
var bucketname="aizou"; //服务名
var username="xxxx";	  //操作员账号
var password="xxxx";     //操作员密码
var url= window.location.protocol + "//v0.api.upyun.com/"+bucketname;
var filedomain = domain.upyun;
console.log(filedomain);
var clipboard = new ClipboardJS('.copy', {
    text: function(trigger) {
        return $(trigger).parent('li').text();
    }
});

clipboard.on('success', function(e) {
    app.msg(true, '复制成功');
});

clipboard.on('error', function(e) {
    app.msg(false, '复制失败');
});

var sort = function (uls) {
    for (var i = 0; i < uls.length; i++) {
        var sortEle = $(uls[i]).find('li').sort(function (a, b) {
            return $(a).data('index') > $(b).data('index') ? 1 : -1;
        });
        $(uls[i]).empty().append(sortEle);
    }
};

$("#image").fileinput({
    uploadUrl: url,
    uploadExtraData: function(previewId, index) {   //该插件可以向您的服务器方法发送附加数据。这可以通过uploadExtraData在键值对中设置为关联数组对象来完成。所以如果你有设置uploadExtraData={id:'kv-1'}，在PHP中你可以读取这些数据$_POST['id']
        var id = $('#id').val();
		var year = (new Date()).getFullYear();
        var save_key="/uploads/"+year+"/"+previewId;
        var policy=btoa(JSON.stringify({"bucket": bucketname, "save-key": save_key, "expiration": parseInt(Date.parse(new Date())+3600)}));
        var signature="UPYUN "+username+":"+b64hamcsha1(HexMD5.MD5(password).toString(HexMD5.enc.Hex), "POST&/"+bucketname+"&"+policy);
        return {seriesId: id,policy:policy,authorization:signature};
    },
    language: "zh",
    theme: "fas",
    previewFileType: "image",
    autoOrientImage: true,
    uploadAsync: true,
    overwriteInitial: false,
    //browseClass: "btn btn-file",
    maxFileSize: "5120",// kb
    maxFileCount: "10",
    showCaption: true,
    dropZoneEnabled: true,
    browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
    allowedFileExtensions: JSON.parse('["jpg","jpeg","gif","png","ico"]'),
}).on("fileuploaded", function(event, data, previewId, index) {
    console.log(data);
    var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader;
    if(200 === response.code) {
        response.data = response;
        response.data.name = files[0].name;
        response.data.url = filedomain + response.data.url;
        $("#code-url ul").prepend("<li data-index=" + index + ">" + response.data.url + "<i class=\"copy iconfont icon-copy\"></i></li>");
        $("#code-html ul").prepend("<li data-index=" + index + ">&lt;img src=\"" + response.data.url + "\" alt=\"" + response.data.name + "\" title=\"" + response.data.name + "\" /&gt;<i class=\"copy iconfont icon-copy\"></i></li>");
        $("#code-bbcode ul").prepend("<li data-index=" + index + ">[img]" + response.data.url + "[/img]<i class=\"copy iconfont icon-copy\"></i></li>");
        $("#code-markdown ul").prepend("<li data-index=" + index + ">![" + response.data.name + "](" + response.data.url + ")<i class=\"copy iconfont icon-copy\"></i></li>");
        $("#code-markdown-with-link ul").prepend("<li data-index=" + index + ">[![" + response.data.name + "](" + response.data.url + ")](" + response.data.url + ")<i class=\"copy iconfont icon-copy\"></i></li>");

        // 排序
        sort(['#code-url ul', '#code-html ul', '#code-bbcode ul', '#code-markdown ul', '#code-markdown-with-link ul']);

        $(".success-info").css("width", "inherit").css('display', 'block');
        if (response.data.quota && response.data.use_quota) {
            $('.quota-container progress').attr('max', response.data.quota);
            $('.quota-container progress').val(response.data.use_quota);
            $('.quota-container span.quota').text(app.bytesToSize(response.data.quota));
            $('.quota-container span.use-quota').text(app.bytesToSize(response.data.use_quota));
        }
    } else if (500 === response.code) {
        mdui.alert(response.msg, '发生异常');
    } else {
        mdui.alert(response.msg);
    }
}).on("filecleared", function (event, data, msg) {
    // 清空
    $('.success-info')
    .css('display', 'none')
    .find('#code-url, #code-html, #code-bbcode, #code-markdown, #code-markdown-with-link')
    .find('ul')
    .html('');
});
$('#image').css("display", "block");

$('.success-info ul').on('mouseenter', "li", function() {
    $('.file-preview .file-drop-zone .file-preview-thumbnails > [data-template=image]').eq($(this).data('index')).addClass('hover');
}).on('mouseout', 'li', function () {
    $('.file-preview .file-drop-zone .file-preview-thumbnails > [data-template=image]').eq($(this).data('index')).removeClass('hover');
});

var thatVer = '1.5.4';
$(function () {
    var toTop = $("#to-top"), toTopHide = function () {
        if ($(window).scrollTop() > 50) {
            toTop.removeClass('mdui-fab-hide');
        } else {
            toTop.addClass('mdui-fab-hide');
        }
    };
    if ($(window).scrollTop() > 50) {
        toTopHide();
    }
    $(window).scroll(function() {
        toTopHide();
    });

    toTop.click(function () {
        $('body,html').animate({ scrollTop: 0 }, 500);
    });

    $('.open-menu').click(function () {
        if ($(window).width() > 1024) {
            app.cookie.set('menu', $('body').hasClass('mdui-drawer-body-left') ? 'open' : 'close', 10, '/');
        }
    });

    $('#update').click(function () {
        app.update(thatVer, true);
    });
});

</script>
</body>
</html>
